Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: run migration for @fluentui/babel-make-styles #20744

Merged
merged 5 commits into from
Nov 25, 2021

Conversation

layershifter
Copy link
Member

@layershifter layershifter commented Nov 24, 2021

Pull request checklist

Description of changes

@fabricteam
Copy link
Collaborator

fabricteam commented Nov 24, 2021

📊 Bundle size report

🤖 This report was generated against 8a141d14f3a14de2e1c4691dad908622f310a9d1

@codesandbox-ci
Copy link

codesandbox-ci bot commented Nov 24, 2021

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 48d25ff:

Sandbox Source
@fluentui/react 8 starter Configuration
@fluentui/react-components 9 starter Configuration

@size-auditor
Copy link

size-auditor bot commented Nov 24, 2021

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 4ea5942620567cd58687002b35a471333761b8df (build)

@layershifter
Copy link
Member Author

image

I guess that we don't have DOM typings in this case as this package is Node only.
What is proffered solution in this case @Hotell?

@layershifter layershifter added the Status: Blocked Resolution blocked by another issue label Nov 24, 2021
@fabricteam
Copy link
Collaborator

fabricteam commented Nov 24, 2021

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1214 1274 5000
BaseButton mount 1238 1248 5000
Breadcrumb mount 3062 3047 1000
ButtonNext mount 752 755 5000
Checkbox mount 1942 1930 5000
CheckboxBase mount 1666 1683 5000
ChoiceGroup mount 5563 5570 5000
ComboBox mount 1252 1258 1000
CommandBar mount 11151 11243 1000
ContextualMenu mount 9462 9476 1000
DefaultButton mount 1481 1510 5000
DetailsRow mount 4499 4505 5000
DetailsRowFast mount 4453 4415 5000
DetailsRowNoStyles mount 4277 4253 5000
Dialog mount 2936 2974 1000
DocumentCardTitle mount 342 354 1000
Dropdown mount 3811 3865 5000
FluentProviderNext mount 4262 4261 5000
FluentProviderWithTheme mount 421 399 10
FluentProviderWithTheme virtual-rerender 283 284 10
FluentProviderWithTheme virtual-rerender-with-unmount 449 435 10
FocusTrapZone mount 2224 2122 5000
FocusZone mount 2182 2218 5000
IconButton mount 2249 2242 5000
Label mount 556 562 5000
Layer mount 3494 3469 5000
Link mount 744 730 5000
MakeStyles mount 2141 2184 50000
MenuButton mount 1858 1855 5000
MessageBar mount 2361 2364 5000
Nav mount 3895 3891 1000
OverflowSet mount 1388 1427 5000
Panel mount 2854 2864 1000
Persona mount 1128 1117 1000
Pivot mount 1770 1757 1000
PrimaryButton mount 1626 1639 5000
Rating mount 9179 9169 5000
SearchBox mount 1738 1738 5000
Shimmer mount 3087 3117 5000
Slider mount 2352 2421 5000
SpinButton mount 5793 5761 5000
Spinner mount 643 628 5000
SplitButton mount 3774 3702 5000
Stack mount 724 730 5000
StackWithIntrinsicChildren mount 2168 2217 5000
StackWithTextChildren mount 5614 5614 5000
SwatchColorPicker mount 11989 11954 5000
TagPicker mount 3163 3193 5000
TeachingBubble mount 14323 14333 5000
Text mount 622 681 5000
TextField mount 1735 1806 5000
ThemeProvider mount 1457 1454 5000
ThemeProvider virtual-rerender 825 825 5000
ThemeProvider virtual-rerender-with-unmount 2270 2308 5000
Toggle mount 1134 1110 5000
buttonNative mount 307 319 5000

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
FlexMinimalPerf.default 383 334 1.15:1
TreeWith60ListItems.default 222 200 1.11:1
ButtonMinimalPerf.default 228 208 1.1:1
ButtonSlotsPerf.default 659 605 1.09:1
ChatDuplicateMessagesPerf.default 356 329 1.08:1
ImageMinimalPerf.default 473 438 1.08:1
BoxMinimalPerf.default 422 398 1.06:1
HeaderMinimalPerf.default 440 420 1.05:1
TextMinimalPerf.default 411 393 1.05:1
AlertMinimalPerf.default 330 317 1.04:1
CarouselMinimalPerf.default 556 537 1.04:1
ListWith60ListItems.default 762 733 1.04:1
LoaderMinimalPerf.default 784 757 1.04:1
CardMinimalPerf.default 681 659 1.03:1
HeaderSlotsPerf.default 913 890 1.03:1
MenuMinimalPerf.default 996 971 1.03:1
PortalMinimalPerf.default 197 192 1.03:1
ReactionMinimalPerf.default 458 445 1.03:1
RefMinimalPerf.default 263 255 1.03:1
StatusMinimalPerf.default 799 774 1.03:1
DialogMinimalPerf.default 863 843 1.02:1
DropdownManyItemsPerf.default 816 797 1.02:1
FormMinimalPerf.default 512 503 1.02:1
LabelMinimalPerf.default 458 449 1.02:1
LayoutMinimalPerf.default 429 422 1.02:1
RadioGroupMinimalPerf.default 527 519 1.02:1
SegmentMinimalPerf.default 417 410 1.02:1
TextAreaMinimalPerf.default 616 601 1.02:1
VideoMinimalPerf.default 729 717 1.02:1
CheckboxMinimalPerf.default 2977 2960 1.01:1
DropdownMinimalPerf.default 3278 3238 1.01:1
EmbedMinimalPerf.default 4630 4581 1.01:1
GridMinimalPerf.default 385 381 1.01:1
InputMinimalPerf.default 1433 1422 1.01:1
ListCommonPerf.default 765 760 1.01:1
PopupMinimalPerf.default 653 647 1.01:1
ProviderMergeThemesPerf.default 1868 1843 1.01:1
SplitButtonMinimalPerf.default 4822 4780 1.01:1
TableManyItemsPerf.default 2214 2192 1.01:1
TableMinimalPerf.default 473 468 1.01:1
CustomToolbarPrototype.default 4474 4435 1.01:1
TooltipMinimalPerf.default 1192 1183 1.01:1
ChatMinimalPerf.default 786 789 1:1
ChatWithPopoverPerf.default 444 446 1:1
DividerMinimalPerf.default 435 435 1:1
ListMinimalPerf.default 613 610 1:1
MenuButtonMinimalPerf.default 1893 1888 1:1
SliderMinimalPerf.default 1863 1857 1:1
ToolbarMinimalPerf.default 1101 1099 1:1
TreeMinimalPerf.default 929 930 1:1
AttachmentMinimalPerf.default 204 206 0.99:1
AttachmentSlotsPerf.default 1207 1216 0.99:1
ButtonOverridesMissPerf.default 1878 1890 0.99:1
DatepickerMinimalPerf.default 6132 6181 0.99:1
RosterPerf.default 1389 1406 0.99:1
AvatarMinimalPerf.default 234 239 0.98:1
ItemLayoutMinimalPerf.default 1399 1424 0.98:1
SkeletonMinimalPerf.default 409 416 0.98:1
IconMinimalPerf.default 727 740 0.98:1
AnimationMinimalPerf.default 468 485 0.96:1
ListNestedPerf.default 660 686 0.96:1
AccordionMinimalPerf.default 181 191 0.95:1
ProviderMinimalPerf.default 1269 1331 0.95:1

@Hotell
Copy link
Contributor

Hotell commented Nov 24, 2021

image

I guess that we don't have DOM typings in this case as this package is Node only. What is proffered solution in this case @Hotell?

for this scenario you need to add following to tsconfig.lib.json

"compilerOptions": {
    "noEmit": false,
-    "lib": ["ES2019"],
+    "lib": ["DOM","ES2019"],
    "outDir": "dist",
    "declaration": true,
-    "types": ["static-assets", "environment"],
+    "types": ["static-assets", "environment", "inline-style-expand-shorthand"],
    "module": "CommonJS"
  },

ideally the generator should check if a node library has web library as dependency and set those accordingly.

from experience this is a corner case and shouldn't happen - instead dependencies should be decoupled into separate libraries so we can have dep graph like following:

2021-11-24 at 15 13

@layershifter
Copy link
Member Author

image
I guess that we don't have DOM typings in this case as this package is Node only. What is proffered solution in this case @Hotell?

for this scenario you need to add following to tsconfig.lib.json

"compilerOptions": {
    "noEmit": false,
-    "lib": ["ES2019"],
+    "lib": ["DOM","ES2019"],
    "outDir": "dist",
    "declaration": true,
-    "types": ["static-assets", "environment"],
+    "types": ["static-assets", "environment", "inline-style-expand-shorthand"],
    "module": "CommonJS"
  },

ideally the generator should check if a node library has web library as dependency and set those accordingly.

from experience this is a corner case and shouldn't happen - instead dependencies should be decoupled into separate libraries so we can have dep graph like following:

2021-11-24 at 15 13

Thanks! Was thinking about the same, but was not sure that it's acceptable solution 👍

@layershifter layershifter removed the Status: Blocked Resolution blocked by another issue label Nov 24, 2021
@layershifter layershifter merged commit 208e351 into master Nov 25, 2021
@layershifter layershifter deleted the chore/migrate-bmk branch November 25, 2021 08:57
mlp73 pushed a commit to mlp73/fluentui that referenced this pull request Jan 17, 2022
* chore: run migration for @fluentui/babel-make-styles

* Change files

* Apply suggestions from code review

Co-authored-by: Martin Hochel <[email protected]>

* fix fmt

* restore change in jest config

Co-authored-by: Martin Hochel <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants